<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 价格管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-cascader
                    v-model="areaId"
                    :options="areaList"
                    clearable
                    placeholder="选择地区"
                    class="handle-select mr10"
                    @change="handleTwoChange"></el-cascader>
                <el-select v-model="query.brand" clearable placeholder="品牌" class="handle-input mr10">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.dictName" :value="item.dictName"></el-option>
                </el-select>
                <el-select v-model="query.material" @change="queChange" clearable placeholder="材质" class="handle-input mr10">
                    <el-option v-for="item in materialList" :key="item.id" :label="item.dictName" :value="item.dictName"></el-option>
                </el-select>
                <el-select v-model="query.model" clearable placeholder="规格" class="handle-input mr10">
                    <el-option v-for="item in modelList" :key="item.id" :label="item.dictName" :value="item.dictName"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" class="mr60" @click="getData">搜索</el-button>
                 
                <el-button type="primary" icon="el-icon-edit" @click="addPrice">批量编辑价格</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header">
                <el-table-column label="地区" align="center" width="150">
                    <template slot-scope="scope">
                        {{scope.row.cityName+','+scope.row.areaName}}
                    </template>
                </el-table-column>
                 <el-table-column prop="brand" label="品牌"></el-table-column>
                 <el-table-column prop="material" label="材质"></el-table-column>
                 <el-table-column prop="model" label="型号"></el-table-column>
                 <el-table-column prop="price" label="价格"></el-table-column>
                 <el-table-column prop="ud" label="涨幅"></el-table-column>
                 <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            class="mid"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red mid"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="total"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 添加弹出框 -->
        <el-dialog title="批量编辑价格" :visible.sync="editVisible" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :model="editForm" label-width="70px">
                <el-form-item label="选择地区">
                    <el-cascader
                        v-model="editForm.areaId"
                        :props="props"
                         class="add_dialog_select"
                        clearable
                        :options="areaList"
                        @change="handleThreeChange"></el-cascader>
                </el-form-item>
                <el-form-item label="选择品牌">
                    <el-select v-model="editForm.brand" class="add_dialog_select" multiple placeholder="请选择">
                        <el-option
                            v-for="item in brandList" :key="item.dictName" :label="item.dictName" :value="item.dictName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择材质">
                    <el-select v-model="editForm.material" @change="queChange2" class="add_dialog_select"  placeholder="请选择">
                        <el-option
                            v-for="item in materialList" :key="item.dictName" :label="item.dictName" :value="item.dictName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择型号">
                    <el-select v-model="editForm.model"  class="add_dialog_select" multiple  placeholder="请选择">
                        <el-option
                            v-for="item in modelList" :key="item.dictName" :label="item.dictName" :value="item.dictName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="editForm.price"  class="add_dialog_select" type="number" placeholder="请输入价格"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 添加弹出框 -->
        <el-dialog title="修改价格" :visible.sync="setVisible" :close-on-click-modal="false">
            <el-form ref="form" :model="setForm" label-width="70px">
                <el-form-item label="价格">
                    <el-input v-model="setForm.price"  type="number" placeholder="请输入价格"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveSetPrice">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'fee',
    data() {
        return {
            props: { multiple: true },
            query: {
                pageNum: 1,
                pageSize: 10,
                areaId:'',
                brand:'',
                material:'',
                model:''
            },
            areaId:'',
            total:0,
            tableData: [],
            editVisible: false,
            editForm:{},
            areaList:[],
            brandList:[],
            materialList:[],
            modelList:[],
            setVisible:false,
            setForm:{},


        };
    },
    created() {
        this.getArea();
        this.getTree();
    },
    methods: {
        queChange(value){
            for(var i=0;i<this.materialList.length;i++){
                if(value == this.materialList[i].dictName){
                    this.query.material = value;
                    if(this.materialList[i].children!=null){
                        for(var j=0;j<this.materialList[i].children.length;j++){
                            if(this.materialList[i].children[j].dictValue==(this.materialList[i].id+'_型号')){
                                this.modelList = this.materialList[i].children[j].children;
                                console.log(this.modelList);
                                break;
                            } 
                        }
                    }
                }
            }
        },
        queChange2(value){
            for(var i=0;i<this.materialList.length;i++){
                 if(value == this.materialList[i].dictName){               
                    if(this.materialList[i].children!=null){
                        for(var j=0;j<this.materialList[i].children.length;j++){
                            if(this.materialList[i].children[j].dictValue==(this.materialList[i].id+'_型号')){
                                this.modelList = this.materialList[i].children[j].children;
                                break;
                            } 
                        }
                    }
                }
            }
        },
        getTree(){
            this.$http.postHead('hgz/dict/getTree').then(res =>{
                    if(res.status){
                        for(var i=0;i<res.data.length;i++){
                            if(res.data[i].dictValue == '品牌'){
                                this.brandList = res.data[i].children;
                            }else if(res.data[i].dictValue == '材质'){
                                this.materialList = res.data[i].children;
                            }
                            this.modelList = [];
                            // else if(res.data[i].dictValue == '型号'){
                            //     this.modelList = res.data[i].children;
                            // }
                        }
                        this.getData();
                    }
                })
        },
        getArea(){
             this.$http.postHead('hgz/address/queryCityAndAreaList','').then(res =>{
                if(res.status){
                   var treeData = [];
                   for(var i=0;i<res.data.length;i++){
                       var children = [];
                       for(var j=0;j<res.data[i].areaVoList.length;j++){
                           children.push({
                               id:res.data[i].areaVoList[j].areaId,
                               label:res.data[i].areaVoList[j].areaName,
                               value:res.data[i].areaVoList[j].areaId
                           })
                       }
                       treeData.push({
                            id: res.data[i].cityId,
                            label: res.data[i].cityName,
                            value:res.data[i].cityId,
                            children:children
                        })
                   }
                   this.areaList = treeData;
                }
            })    
        },
                // 获取数据
        getData() {
            this.$http.postHead('hgz/product/queryListWithPage',this.query).then(res =>{
                if(res.status){
                    var dataList =  res.data.list;

                    // for(var i=0;i<dataList.length;i++){
                    //     for(var j=0;j<this.brandList.length;j++){
                    //         if(dataList[i].brand == this.brandList[j].id){
                    //             dataList[i].brandName = this.brandList[j].dictName;
                    //         }
                    //     }
                    //     for(var j=0;j<this.materialList.length;j++){
                    //         if(dataList[i].material == this.materialList[j].id){
                    //             dataList[i].materialName = this.materialList[j].dictName;
                                
                    //             for(var k=0;k<this.materialList[j].children.length;k++){
                    //                 if(this.materialList[j].children[k].dictValue == (dataList[i].material+'_型号')){
                    //                     for(var m=0;m<this.materialList[j].children[k].children.length;m++){
                    //                         if(dataList[i].model == this.materialList[j].children[k].children[m].id){
                    //                             dataList[i].modelName = this.materialList[j].children[k].children[m].dictName;
                    //                         }
                    //                     }
                    //                 }
                    //             }
                    //             break;
                    //         }
                    //     }
                    //     // for(var j=0;j<this.modelList.length;j++){
                    //     //     if(dataList[i].model == this.modelList[j].id){
                    //     //         dataList[i].modelName = this.modelList[j].dictName;
                    //     //     }
                    //     // }
                    // }


                   this.tableData = dataList;
                   this.total = res.data.total;
                }
            })
        },
        handleTwoChange(value){
            this.query.areaId = value[1];
        },
        handleThreeChange(value) {
            console.log(value);
        },
        handleEdit(index,row){
            this.setVisible = true;
            this.setForm = {
                id:row.id,
                price:row.price
            }
        },
        saveSetPrice(){
           this.$http.postHead('hgz/product/updatePriceById',this.setForm).then(res =>{
               if(res.status){
                    this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                         this.setVisible = false;
                         this.getData();
                }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });   
                }
           })
           
        },
        // 触发搜索按钮
        addPrice() {
            this.editVisible = true;
            this.editForm = {
                
            }
        },
        handleDelete(index, row){
            this.$http.postHead(`hgz/product/deleteById/${row.id}`)
                .then(res =>{
                    if(res.status){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });   
                    }
                })
        },
        // 保存编辑
        saveEdit() {
            console.log(this.editForm);
            var areaList ="";

            for(var i=0;i<this.editForm.areaId.length;i++){
                if(i == 0){
                    areaList = this.editForm.areaId[i][1];
                }else{
                    areaList = areaList + ";"+this.editForm.areaId[i][1];
                }
            }

            console.log(areaList);
            var brandList = "";
            for(var i=0;i<this.editForm.brand.length;i++){
                if(i == 0){
                    brandList = this.editForm.brand[i];
                }else{
                    brandList = brandList + ";"+this.editForm.brand[i];
                }
            }
            console.log(brandList);
            var modelList = "";
            for(var i=0;i<this.editForm.model.length;i++){
                if(i == 0){
                    modelList = this.editForm.model[i];
                }else{
                    modelList = modelList + ";"+this.editForm.model[i];
                }
            }
            console.log(modelList);
            var materialList = this.editForm.material;
            // for(var i=0;i<this.editForm.material.length;i++){
            //     if(i == 0){
            //         materialList = this.editForm.material[i];
            //     }else{
            //         materialList = materialList + ";"+this.editForm.material[i];
            //     }
            // }
            console.log(materialList);
            var price = this.editForm.price;
            if(areaList == ""){
                        this.$message({
                            type: 'error',
                            message: "请选择地区"
                        });  
                return;
            }
            if(brandList == ""){
                        this.$message({
                            type: 'error',
                            message: "请选择品牌"
                        }); 
                return;
            }
            if(modelList == ""){
                        this.$message({
                            type: 'error',
                            message: "请选择型号"
                        }); 
                return;
            }
            if(materialList == ""){
                        this.$message({
                            type: 'error',
                            message: "请选择材质"
                        }); 
                return;
            }
            if(price == ""){
                        this.$message({
                            type: 'error',
                            message: "请输入价格"
                        }); 
                return;
            }
            var params = {
                areaId: areaList,
                brand:brandList,
                material:materialList,
                model:modelList,
                price:price,
            }
            this.$http.postHead(`hgz/product/save`,params)
                .then(res =>{
                    if(res.status){
                        this.$message({
                            type: 'success',
                            message: '编辑成功!'
                        });
                        this.getData();
                        this.editVisible = false;
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });   
                    }
                })

        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 160px;
}

.handle-input {
    width: 120px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.add_dialog_select{
    width: 360px;
}
.red {
    color: #ff0000;
}
.orange {
    color: orange;
}
.mid{
    font-size: 16px;;
}
.mr10 {
    margin-right: 10px;
}
.mr60{
    margin-right: 30px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
